import React from 'react'
import {  TabBar } from 'antd-mobile'
import style from './css/index.module.css'
import {
  AppOutline,
  MessageOutline,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
// tabber 定义
function Tabber() {
    const tabs = [
    {
      key: '/index',
      title: '首页',
      icon: <AppOutline />,
    },
    {
      key: '/order',
      title: '订单',
      icon: <UnorderedListOutline />,
    },
    {
      key: '/class',
      title: '客服',
      icon: <MessageOutline />,
    },
    {
      key: '/home',
      title: '我的',
      icon: <UserOutline />,
    },
  ]
//   点击tabber跳转指定页面
  const navigate=useNavigate()
  const change=(key)=>{
    navigate(key)
  }
  return (
    <div className={style.tab}>
       <TabBar onChange={change}>
          {tabs.map(item => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
    </div>
  )
}

export default Tabber
